<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
  <title>简单示例 - JRoll</title>
  <link rel="stylesheet" href="../css/demo.css">
  <script src="../download/jroll.min.js"></script>
</head>
<body>
  <div id="simple">
    <div id="wrapper">
      <ul id="scroller"></ul>
    </div>
    <menu id="btns">
      <div class="btn" id="ten">十</div>
      <div class="btn" id="hundred">百</div>
      <div class="btn" id="thousand">千</div>
      <div class="btn" id="million">万</div>
    </menu>
  </div>
  <script>
    var jroll = new JRoll("#wrapper", {scrollBarY:true, scrollBarFade:true});
    var scroller = document.getElementById("scroller");

    function createLi (num) {
      var str = "";
      for (var i=1; i<=num; i++) {
        str += "<li>"+i+"</li>";
      }
      scroller.innerHTML = str;
      jroll.refresh().scrollTo(0,0, 400);
    }

    createLi(10);

    document.getElementById("ten").onclick = function() {
      createLi(10);
    };
    document.getElementById("hundred").onclick = function() {
      createLi(100);
    };
    document.getElementById("thousand").onclick = function() {
      createLi(1000);
    };
    document.getElementById("million").onclick = function() {
      createLi(10000);
    };
  </script>
</body>
</html>